import React from 'react';
import { PageHeaderWrapper, PageLoading } from '@ant-design/pro-layout';
import routes from '@/routes';
import { useRequest, useSetState } from 'ahooks';
import { ApiResult } from '@/services/ApiResult';
import { Col, Row, Select, Table } from 'antd';
import { Link } from 'umi';
import { SettingOutlined } from '@ant-design/icons/lib';
import { Line } from '@ant-design/charts';
import { PluginAliyunMonitorDto, PluginAliyunMonitorPeriod } from '@/services/dto/PluginAliyunMonitor.dto';

const { Option } = Select;

export default (props: any) => {


  const [query, setQuery] = useSetState({ period: PluginAliyunMonitorPeriod.oneDay });
  const pluginAliyunMonitorServerEcsUseRequest = useRequest<ApiResult<PluginAliyunMonitorDto>>(
    (params) => routes.apiRoutes.pluginAliyunMonitor(params ? params : query),
    {
      manual: false,
      refreshOnWindowFocus: false,
    },
  );
  if (!pluginAliyunMonitorServerEcsUseRequest.data) {
    return <PageLoading/>;
  }


  return (
    <PageHeaderWrapper>
      <Row style={{ padding: '10px', backgroundColor: '#ffffff' }}>
        <Col xl={12}>
          周期：
          <Select value={query.period}
                  onSelect={(value) => {
                    setQuery({ period: value });
                    pluginAliyunMonitorServerEcsUseRequest.run({ period: value });
                  }}
          >
            <Option value="1h">1小时</Option>
            <Option value="6h">6小时</Option>
            <Option value="1d">1天</Option>
            <Option value="7d">7天</Option>
            <Option value="15d">15天</Option>
            {/*<Option value="cusotm">自定义</Option>*/}
          </Select>
        </Col>
        <Col xl={12}>
          <Link key={'AccessKeySetting'}
                to={routes.pageRoutes.pluginAliyunMonitorAccessKeySetting}><SettingOutlined/> AccessKey</Link>&nbsp;&nbsp;
          <Link key={'ECSSetting'}
                to={routes.pageRoutes.pluginAliyunMonitorECSSetting}><SettingOutlined/> ECS</Link>&nbsp;&nbsp;
          <Link key={'SLBSetting'}
                to={routes.pageRoutes.pluginAliyunMonitorSLBSetting}><SettingOutlined/> SLB</Link>&nbsp;&nbsp;
          <Link key={'PolardbSetting'}
                to={routes.pageRoutes.pluginAliyunMonitorPolardbSetting}><SettingOutlined/> Polardb</Link>&nbsp;&nbsp;
          <Link key={'RedisSetting'}
                to={routes.pageRoutes.pluginAliyunMonitorRedisSetting}><SettingOutlined/> Redis</Link>&nbsp;&nbsp;
          <Link key={'RocketmqSetting'}
                to={routes.pageRoutes.pluginAliyunMonitorRocketmqSetting}><SettingOutlined/> Rocketmq</Link>&nbsp;&nbsp;
        </Col>
      </Row>
      <Row justify={'center'} style={{ backgroundColor: '#ffffff', margin: '10px 0 0 0' }}>
        <Col style={{ padding: '10px' }}>
          Ecs
        </Col>
      </Row>
      <Table dataSource={pluginAliyunMonitorServerEcsUseRequest?.data?.result?.ecs}
             columns={[
               {
                 title: '资源名称',
                 dataIndex: 'instanceName',
                 key: 'instanceName',
                 width: '1%',
               },
               {
                 title: 'CPU使用率',
                 width: '40%',
                 dataIndex: 'cpu_total',
                 key: 'cpu_total',
                 render: (_: any, row: any) => {

                   console.log('row.period', row.period);
                   const config = {
                     data: row?.cpu_total,
                     xField: 'date',
                     yField: 'average',
                     meta: {
                       average: {
                         max: 100,
                         min: 0,
                       },
                     },
                     yAxis: {
                       label: {
                         formatter: function formatter(v: string) {
                           return `${v}%`;
                         },
                       },
                     },
                     xAxis: {
                       label: {
                         formatter: function formatter(v: string) {
                           if (row.period === '1h') {
                             return `${v}`.substr(10);
                           }
                           return `${v}`.substr(5);
                         },
                       },
                     },
                   };
                   return <Line {...config} />;
                 },
               },
               {
                 title: '系统负载',
                 width: '40%',
                 dataIndex: 'cpu_load',
                 key: 'cpu_load',
                 render: (_: any, row: any) => {
                   const config = {
                     data: row?.cpu_load,
                     xField: 'date',
                     yField: 'average',
                     seriesField: 'type',
                     xAxis: {
                       label: {
                         formatter: function formatter(v: string) {
                           if (row.period === '1h') {
                             return `${v}`.substr(10);
                           }
                           return `${v}`.substr(5);
                         },
                       },
                     },

                   };

                   return <Line {...config} />;
                 },
               },
               {
                 title: '内存使用率',
                 dataIndex: 'memory_usedutilization',
                 key: 'memory_usedutilization',
                 render: (_: any, row: any) => {
                   const config = {
                     data: row?.memory_usedutilization,
                     xField: 'date',
                     yField: 'average',
                     meta: {
                       average: {
                         max: 100,
                         min: 0,
                       },
                     },
                     xAxis: {
                       label: {
                         formatter: function formatter(v: string) {
                           if (row.period === '1h') {
                             return `${v}`.substr(10);
                           }
                           return `${v}`.substr(5);
                         },
                       },
                     },
                     yAxis: {
                       label: {
                         formatter: function formatter(v: string) {
                           return `${v}%`;
                         },
                       },
                     },
                   };

                   return <Line {...config} />;
                 },
               },
             ]}
             pagination={false}/>
      <Row justify={'center'} style={{ backgroundColor: '#ffffff', margin: '10px 0 0 0' }}>
        <Col style={{ padding: '10px' }}>
          SLB
        </Col>
      </Row>
      <Table dataSource={pluginAliyunMonitorServerEcsUseRequest?.data?.result?.slb} columns={[
        {
          title: '资源名称',
          dataIndex: 'instanceName',
          key: 'instanceName',
          width: '1%',
        },
        {
          title: 'qps',
          dataIndex: 'qps',
          key: 'qps',
          render: (_: any, row: any) => {
            const config = {
              data: row?.qps,
              xField: 'date',
              yField: 'average',
              xAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    if (row.period === '1h') {
                      return `${v}`.substr(10);
                    }
                    return `${v}`.substr(5);
                  },
                },
              },
            };
            return <Line {...config} />;
          },
        },

      ]} pagination={false}/>


      <Row justify={'center'} style={{ backgroundColor: '#ffffff', margin: '10px 0 0 0' }}>
        <Col style={{ padding: '10px' }}>
          PolarDB
        </Col>
      </Row>
      <Table dataSource={pluginAliyunMonitorServerEcsUseRequest?.data?.result?.polardb} columns={[
        {
          title: '资源名称',
          dataIndex: 'instanceName',
          key: 'instanceName',
          width: '1%',
        },
        {
          title: 'qps',
          dataIndex: 'qps',
          width: '40%',
          key: 'qps',
          render: (_: any, row: any) => {
            const config = {
              data: row?.qps,
              xField: 'date',
              yField: 'average',
              seriesField: 'nodeId',
              xAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    if (row.period === '1h') {
                      return `${v}`.substr(10);
                    }
                    return `${v}`.substr(5);
                  },
                },
              },
            };
            return <Line {...config} />;
          },
        },
        {
          title: 'cpu使用率',
          dataIndex: 'cpu_ratio',
          key: 'cpu_ratio',
          width: '40%',
          render: (_: any, row: any) => {
            const config = {
              data: row?.cpu_ratio,
              xField: 'date',
              yField: 'average',
              seriesField: 'nodeId',
              meta: {
                average: {
                  max: 100,
                  min: 0,
                },
              },
              yAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    return `${v}%`;
                  },
                },
              },
              xAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    if (row.period === '1h') {
                      return `${v}`.substr(10);
                    }
                    return `${v}`.substr(5);
                  },
                },
              },
            };
            return <Line {...config} />;
          },
        },


        {
          title: '内存使用率',
          dataIndex: 'mem_ratio',
          key: 'mem_ratio',
          render: (_: any, row: any) => {

            console.log(row?.mem_ratio);

            const config = {
              data: row?.mem_ratio,
              xField: 'date',
              yField: 'average',
              seriesField: 'nodeId',
              meta: {
                average: {
                  max: 100,
                  min: 0,
                },
              },
              xAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    if (row.period === '1h') {
                      return `${v}`.substr(10);
                    }
                    return `${v}`.substr(5);
                  },
                },
              },
              yAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    return `${v}%`;
                  },
                },
              },
            };

            return <Line {...config} />;
          },
        },

      ]} pagination={false}/>

      <Row justify={'center'} style={{ backgroundColor: '#ffffff', margin: '10px 0 0 0' }}>
        <Col style={{ padding: '10px' }}>
          Redis
        </Col>
      </Row>
      <Table dataSource={pluginAliyunMonitorServerEcsUseRequest?.data?.result?.redis} columns={[
        {
          title: '资源名称',
          dataIndex: 'instanceName',
          key: 'instanceName',
          width: '1%',
        },
        {
          title: 'qps',
          dataIndex: 'qps',
          width: '40%',
          key: 'qps',
          render: (_: any, row: any) => {
            const config = {
              data: row?.qps,
              xField: 'date',
              yField: 'average',
              seriesField: 'type',
              xAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    if (row.period === '1h') {
                      return `${v}`.substr(10);
                    }
                    return `${v}`.substr(5);
                  },
                },
              },
            };
            return <Line {...config} />;
          },
        },
        {
          title: 'cpu使用率',
          dataIndex: 'CpuUsage',
          key: 'CpuUsage',
          width: '40%',
          render: (_: any, row: any) => {
            const config = {
              data: row?.cpuUsage,
              xField: 'date',
              yField: 'average',
              meta: {
                average: {
                  max: 100,
                  min: 0,
                },
              },
              yAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    return `${v}%`;
                  },
                },
              },
              xAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    if (row.period === '1h') {
                      return `${v}`.substr(10);
                    }
                    return `${v}`.substr(5);
                  },
                },
              },
            };
            return <Line {...config} />;
          },
        },


        {
          title: '内存使用率',
          dataIndex: 'usedMemory',
          key: 'usedMemory',
          render: (_: any, row: any) => {
            const config = {
              data: row?.usedMemory,
              xField: 'date',
              yField: 'average',
              meta: {
                average: {
                  max: 100,
                  min: 0,
                },
              },
              xAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    if (row.period === '1h') {
                      return `${v}`.substr(10);
                    }
                    return `${v}`.substr(5);
                  },
                },
              },
              yAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    return `${v}%`;
                  },
                },
              },
            };

            return <Line {...config} />;
          },
        },

      ]} pagination={false}/>

      <Row justify={'center'} style={{ backgroundColor: '#ffffff', margin: '10px 0 0 0' }}>
        <Col style={{ padding: '10px' }}>
          Rocketmq
        </Col>
      </Row>
      <Table dataSource={pluginAliyunMonitorServerEcsUseRequest?.data?.result?.rocketmq} columns={[
        {
          title: '资源名称',
          dataIndex: 'instanceName',
          key: 'instanceName',
          width: '1%',
        },
        {
          title: '实例（Instance）每分钟接收消息数的数量',
          width: '33%',
          dataIndex: 'receiveMessageCountPerInstance',
          key: 'receiveMessageCountPerInstance',
          render: (_: any, row: any) => {
            const config = {
              data: row?.receiveMessageCountPerInstance,
              xField: 'date',
              yField: 'average',
              xAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    if (row.period === '1h') {
                      return `${v}`.substr(10);
                    }
                    return `${v}`.substr(5);
                  },
                },
              },
            };
            return <Line {...config} />;
          },
        },
        {
          title: '实例（Instance）每分钟发送消息数量',
          width: '33%',
          dataIndex: 'sendMessageCountPerInstance',
          key: 'sendMessageCountPerInstance',
          render: (_: any, row: any) => {
            const config = {
              data: row?.sendMessageCountPerInstance,
              xField: 'date',
              yField: 'average',
              xAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    if (row.period === '1h') {
                      return `${v}`.substr(10);
                    }
                    return `${v}`.substr(5);
                  },
                },
              },
            };
            return <Line {...config} />;
          },
        },
        {
          title: '消息堆积',
          dataIndex: 'consumerLag',
          width: '33%',
          key: 'consumerLag',
          render: (_: any, row: any) => {
            const config = {
              data: row?.consumerLag,
              xField: 'date',
              yField: 'average',
              seriesField: 'groupId',
              xAxis: {
                label: {
                  formatter: function formatter(v: string) {
                    if (row.period === '1h') {
                      return `${v}`.substr(10);
                    }
                    return `${v}`.substr(5);
                  },
                },
              },
            };
            return <Line {...config} />;
          },
        },
      ]} pagination={false}/>
    </PageHeaderWrapper>
  );
}
